CSS 容器查询：容器查询定义的综合指南

响应式网页设计已经取得了显著的进展。最初，媒体查询是基石，它允许布局根据视口大小进行调整。然而，随着网站变得越来越复杂和基于组件，对更精细、更灵活的方法的需求变得日益明显。这正是 CSS 容器查询发挥作用的地方。

什么是 CSS 容器查询？

CSS 容器查询允许开发者根据元素的包含元素的大小或状态来应用样式，而不是根据视口。这一根本性转变使得创建真正可重用和自适应的组件成为可能，这些组件可以无缝地集成到网页的各种上下文中。

想象一下，一个卡片组件需要根据其是放置在狭窄的侧边栏还是宽阔的主内容区域来调整其布局。通过容器查询，这种调整变得简单直接，确保无论周围环境如何都能获得最佳的呈现效果。

为什么使用容器查询？

• 提高组件可重用性： 组件变得真正独立和自适应，简化了维护工作，并促进了网站不同部分之间的一致性。
• 更精细的控制： 与依赖于视口的媒体查询不同，容器查询提供了基于组件特定环境的精细化样式控制。
• 简化开发： 减少了使用复杂 JavaScript 解决方案来根据组件在布局中的位置管理其样式的需求。
• 增强用户体验： 在各种设备和屏幕尺寸上提供最佳体验，确保内容始终以最合适的方式呈现。

定义容器

在使用容器查询之前，您需要定义哪个元素将作为容器。这可以通过使用 container-type 属性来完成。

container-type 属性

container-type 属性指定一个元素是否是查询容器，如果是，它是什么类型的容器。它接受以下值：

• size: 容器的查询条件将基于其内联尺寸（水平书写模式下的宽度，垂直书写模式下的高度）和块级尺寸（水平书写模式下的高度，垂直书写模式下的宽度）。这是最常用和最通用的选项。
• inline-size: 容器的查询条件将基于其内联尺寸（水平书写模式下的宽度，垂直书写模式下的高度）。
• normal: 该元素不是查询容器。这是默认值。
• style: 该元素是一个样式容器。样式容器通过 @container style() 查询将其上定义的自定义属性暴露给后代元素。这对于基于自定义属性进行样式设置非常有用。

示例：

            
.container {
  container-type: size;
}

            

              
                Copy
              
            
          

此代码片段将类名为 container 的元素定义为查询容器，使其尺寸可用于容器查询。

或者，您可以使用 container: inline-size 或 container: size。container 简写属性可以在单个声明中同时设置 container-type 和 container-name。容器名称用于在嵌套容器时定位特定的容器。

使用容器查询

一旦定义了容器，您就可以使用 @container at-rule 来根据其大小或状态应用样式。

@container at-rule 规则

@container at-rule 规则类似于 @media at-rule 规则，但它不是针对视口，而是针对特定的容器。其语法如下：

            
@container [container-name] (condition) {
  /* Styles to apply when the condition is met */
}

            

              
                Copy
              
            
          

• container-name (可选): 如果您已使用 container-name 属性为容器命名，可以在此处指定它以定位该特定容器。如果省略，它将应用于最近的祖先容器。
• condition: 必须满足的条件才能应用样式。这可以基于容器的宽度、高度或其他属性。

示例：

            
.card {
  display: flex;
  flex-direction: column;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }

  .card__image {
    width: 40%;
  }

  .card__content {
    width: 60%;
  }
}

            

              
                Copy
              
            
          

在此示例中，当 .card 元素的容器宽度至少为 400px 时，它将从列布局切换到行布局。.card__image 和 .card__content 元素的宽度也将相应调整。

容器查询单位

容器查询引入了相对于容器尺寸的新单位：

• cqw: 容器宽度的 1%。
• cqh: 容器高度的 1%。
• cqi: 容器内联尺寸的 1%。
• cqb: 容器块级尺寸的 1%。
• cqmin: cqi 或 cqb 中的较小值。
• cqmax: cqi 或 cqb 中的较大值。

这些单位允许您创建真正相对于容器大小的样式，使您的组件更具适应性。

示例：

            
.element {
  font-size: 2cqw;
  padding: 1cqh;
}

            

              
                Copy
              
            
          

在此示例中，.element 的字体大小将是容器宽度的 2%，其内边距将是容器高度的 1%。

实际案例

让我们探讨一些关于如何使用容器查询来创建响应式和自适应组件的实际示例。

示例 1：卡片组件

考虑一个显示产品信息的卡片组件。该组件可能需要根据其在页面上的位置来调整其布局。

HTML:

            

  

    
    

      
Product Title
      
Product description goes here.
      Learn More
    
  


            

              
                Copy
              
            
          

CSS:

            
.container {
  container-type: inline-size;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 16px;
}

.card__image {
  width: 100%;
  margin-bottom: 16px;
}

.card__title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }

  .card__image {
    width: 40%;
    margin-bottom: 0;
    margin-right: 16px;
  }

  .card__content {
    width: 60%;
  }
}

            

              
                Copy
              
            
          

在此示例中，.container 元素被定义为内联尺寸容器。当容器宽度小于 500px 时，卡片组件将以列布局显示图像和内容。当容器宽度为 500px 或更宽时，卡片组件将切换到行布局，图像在左，内容在右。这确保了卡片组件无论放置在页面的哪个位置都看起来很好。

示例 2：导航菜单

容器查询的另一个常见用例是根据可用空间调整导航菜单。

HTML:

            

  


            

              
                Copy
              
            
          

CSS:

            
.nav-container {
  container-type: inline-size;
  width: 100%;
  background-color: #f0f0f0;
}

.nav {
  padding: 16px;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav__item {
  margin-bottom: 8px;
}

.nav__link {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

@container (max-width: 400px) {
  .nav__list {
    flex-direction: column;
  }

  .nav__item {
    margin-bottom: 16px;
  }

  .nav__link {
    display: block;
    width: 100%;
    text-align: center;
  }
}

            

              
                Copy
              
            
          

在此示例中，.nav-container 元素被定义为内联尺寸容器。当容器宽度为 400px 或更窄时，导航菜单将切换到列布局，每个链接占据容器的全部宽度。当容器宽度大于 400px 时，导航菜单将以行布局显示链接，并在它们之间留有空间。这使得导航菜单能够适应不同的屏幕尺寸和方向。

嵌套容器

容器查询可以嵌套，从而实现更复杂和更精细的样式控制。要在嵌套时定位特定的容器，您可以使用 container-name 属性为您的容器指定唯一的名称。然后，在您的 @container at-rule 规则中，您可以指定要定位的容器的名称。

示例：

            

  

    
Content
  


            

              
                Copy
              
            
          

            
.outer-container {
  container-type: inline-size;
  container-name: outer;
}

.inner-container {
  container-type: inline-size;
  container-name: inner;
}

@container outer (min-width: 500px) {
  .inner-container {
    background-color: lightblue;
  }
}

@container inner (min-width: 300px) {
  p {
    font-size: 1.2rem;
  }
}

            

              
                Copy
              
            
          

在此示例中，.outer-container 被命名为“outer”，.inner-container 被命名为“inner”。第一个 @container at-rule 规则针对“outer”容器，当“outer”容器宽度至少为 500px 时，为 .inner-container 应用背景色。第二个 @container at-rule 规则针对“inner”容器，当“inner”容器宽度至少为 300px 时，增加 p 元素的字体大小。

浏览器支持

容器查询拥有出色且不断增长的浏览器支持。 大多数现代浏览器都完全支持 container-type、container-name 和 @container 功能。 始终建议查看 Can I use 以获取最新的兼容性信息。

对于不支持容器查询的旧版浏览器，您可以使用 polyfill 来提供后备支持。然而，需要注意的是，polyfill 可能无法完美复制原生容器查询的行为，并且它们会增加页面加载时间。

最佳实践

以下是使用容器查询时需要牢记的一些最佳实践：

• 移动优先： 首先为最小的容器尺寸设计组件，然后使用容器查询为更大的容器逐步增强布局。
• 使用有意义的容器名称： 如果您正在嵌套容器，请使用清晰表明每个容器用途的描述性名称。
• 避免过于复杂的查询： 保持您的容器查询简单和专注。太多复杂的查询会使您的代码难以理解和维护。
• 充分测试： 在各种容器尺寸和环境中测试您的组件，以确保它们能够正确适应。
• 考虑性能： 注意容器查询对性能的影响，尤其是在使用复杂查询或大量容器时。

可访问性注意事项

虽然容器查询主要关注视觉布局调整，但考虑可访问性至关重要，以确保您的组件对每个人都可用。

• 保持语义结构： 确保底层的 HTML 结构无论容器大小如何都保持语义化和可访问性。
• 使用辅助技术测试： 使用屏幕阅读器和其他辅助技术测试您的组件，以验证内容是否仍然可访问和可理解。
• 提供替代内容： 如果容器大小显著改变了内容，请考虑提供替代内容或机制，以确保残障用户可以访问信息。

超越尺寸：状态查询

虽然基于尺寸的容器查询是最常见的，但容器查询的未来不仅仅局限于尺寸。 目前已有关于样式查询和状态查询的新兴规范和提案。

样式查询允许您根据容器上定义的自定义属性来应用样式。这使得能够基于动态数据和配置进行强大的样式设置。

状态查询将允许您查询容器的状态，例如它是否被聚焦、悬停或应用了特定的类。这可能为响应用户交互的自适应组件开辟更多可能性。

结论

CSS 容器查询是创建响应式和自适应网页组件的强大工具。通过允许您根据包含元素的大小或状态来设置元素样式，容器查询提供了一种比传统媒体查询更精细、更灵活的响应式设计方法。随着浏览器支持的不断完善，容器查询必将成为每位 Web 开发人员工具箱中不可或缺的一部分。拥抱它们，为全球用户构建更健壮、可重用和用户友好的网络体验。

容器查询所释放的可能性远不止简单的布局调整。它们能够创建感知上下文的组件，这些组件可以适应各种情况，从而带来更无缝、更直观的用户体验。在您探索这一强大功能时，请思考它如何能增强您网页项目的可重用性、可维护性和适应性，最终为构建一个更具包容性和全球可访问性的网络做出贡献。

通过利用容器查询的力量，您可以打造出不仅视觉上吸引人，而且高度自适应和以用户为中心的网络体验，满足全球受众的多样化需求。